import React from 'react';
import { Link } from 'react-router-dom';
import { Calendar, User, ChevronRight } from 'lucide-react';
import Button from '../components/Button';
import { useLanguage } from '../contexts/LanguageContext';

const Blog = () => {
  const { t } = useLanguage();
  
  return <div className="w-full">
      {/* Blog Header */}
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-16 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            {t('blog.title')}
          </h1>
          <p className="text-xl text-gray-300 dark:text-gray-200 max-w-2xl mx-auto">
            {t('blog.subtitle')}
          </p>
        </div>
      </section>
      {/* Featured Post */}
      <section className="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="bg-gray-50 dark:bg-gray-800 rounded-xl overflow-hidden mb-12 transition-colors duration-300">
            <div className="grid grid-cols-1 lg:grid-cols-2">
              <div className="h-64 lg:h-auto bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2000&q=80" alt="IPv6网络" className="w-full h-full object-cover" />
              </div>
              <div className="p-8 lg:p-12">
                <div className="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
                  <div className="flex items-center mr-6">
                    <Calendar size={14} className="mr-1" />
                    <span>2023-08-15</span>
                  </div>
                  <div className="flex items-center">
                    <User size={14} className="mr-1" />
                    <span>张工</span>
                  </div>
                </div>
                <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-4">
                  IPv6代理技术的未来发展趋势
                </h2>
                <p className="text-gray-600 dark:text-gray-300 mb-6">
                  随着IPv4地址资源的日益枯竭，IPv6正在成为互联网的未来。本文探讨了IPv6代理技术的最新发展趋势，以及它如何彻底改变数据采集行业。
                </p>
                <Link to="/blog/ipv6-future-trends">
                  <Button>
                    {t('blog.readMore')}
                    <ChevronRight size={16} className="ml-1" />
                  </Button>
                </Link>
              </div>
            </div>
          </div>
          {/* Blog Posts Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Post 1 */}
            <div className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
              <div className="h-48 bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="API集成" className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
                  <div className="flex items-center mr-4">
                    <Calendar size={12} className="mr-1" />
                    <span>2023-08-10</span>
                  </div>
                  <div className="flex items-center">
                    <User size={12} className="mr-1" />
                    <span>李工</span>
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                  如何高效集成kernelProxy API
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                  本文将介绍如何在不同语言和框架中高效集成kernelProxy
                  API，提高代理使用效率，避免常见的集成错误。
                </p>
                <Link to="/blog/api-integration" className="text-[#00d4ff] hover:underline flex items-center">
                  {t('blog.readMore')}
                  <ChevronRight size={14} className="ml-1" />
                </Link>
              </div>
            </div>
            {/* Post 2 */}
            <div className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
              <div className="h-48 bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="数据采集最佳实践" className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
                  <div className="flex items-center mr-4">
                    <Calendar size={12} className="mr-1" />
                    <span>2023-08-05</span>
                  </div>
                  <div className="flex items-center">
                    <User size={12} className="mr-1" />
                    <span>王工</span>
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                  Web数据采集最佳实践指南
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                  在进行大规模数据采集时，如何避免IP被封禁？如何提高采集效率？本文分享了我们多年积累的经验和最佳实践。
                </p>
                <Link to="/blog/web-scraping-best-practices" className="text-[#00d4ff] hover:underline flex items-center">
                  {t('blog.readMore')}
                  <ChevronRight size={14} className="ml-1" />
                </Link>
              </div>
            </div>
            {/* Post 3 */}
            <div className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
              <div className="h-48 bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1563986768609-322da13575f3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="代理安全" className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
                  <div className="flex items-center mr-4">
                    <Calendar size={12} className="mr-1" />
                    <span>2023-07-28</span>
                  </div>
                  <div className="flex items-center">
                    <User size={12} className="mr-1" />
                    <span>赵工</span>
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                  代理使用中的安全注意事项
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                  使用代理服务时，如何保护您的数据安全？如何防止信息泄露？本文将介绍代理使用中的安全最佳实践。
                </p>
                <Link to="/blog/proxy-security" className="text-[#00d4ff] hover:underline flex items-center">
                  {t('blog.readMore')}
                  <ChevronRight size={14} className="ml-1" />
                </Link>
              </div>
            </div>
            {/* Post 4 */}
            <div className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
              <div className="h-48 bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="代理性能优化" className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
                  <div className="flex items-center mr-4">
                    <Calendar size={12} className="mr-1" />
                    <span>2023-07-20</span>
                  </div>
                  <div className="flex items-center">
                    <User size={12} className="mr-1" />
                    <span>刘工</span>
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                  如何优化代理性能
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                  代理性能直接影响数据采集效率。本文介绍了多种优化代理性能的技巧，帮助您最大化代理的使用价值。
                </p>
                <Link to="/blog/optimize-proxy-performance" className="text-[#00d4ff] hover:underline flex items-center">
                  {t('blog.readMore')}
                  <ChevronRight size={14} className="ml-1" />
                </Link>
              </div>
            </div>
            {/* Post 5 */}
            <div className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
              <div className="h-48 bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="代理市场趋势" className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
                  <div className="flex items-center mr-4">
                    <Calendar size={12} className="mr-1" />
                    <span>2023-07-15</span>
                  </div>
                  <div className="flex items-center">
                    <User size={12} className="mr-1" />
                    <span>陈工</span>
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                  2023年代理市场趋势分析
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                  随着数据经济的蓬勃发展，代理服务市场也在快速变化。本文分析了2023年代理市场的主要趋势和未来发展方向。
                </p>
                <Link to="/blog/proxy-market-trends" className="text-[#00d4ff] hover:underline flex items-center">
                  {t('blog.readMore')}
                  <ChevronRight size={14} className="ml-1" />
                </Link>
              </div>
            </div>
            {/* Post 6 */}
            <div className="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
              <div className="h-48 bg-gray-200 dark:bg-gray-700">
                <img src="https://images.unsplash.com/photo-1607799279861-4dd421887fb3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80" alt="代理与AI" className="w-full h-full object-cover" />
              </div>
              <div className="p-6">
                <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
                  <div className="flex items-center mr-4">
                    <Calendar size={12} className="mr-1" />
                    <span>2023-07-08</span>
                  </div>
                  <div className="flex items-center">
                    <User size={12} className="mr-1" />
                    <span>吴工</span>
                  </div>
                </div>
                <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-3">
                  代理服务与AI的结合应用
                </h3>
                <p className="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                  AI技术的发展为代理服务带来了新的应用场景。本文探讨了代理服务与AI结合的创新应用和未来可能性。
                </p>
                <Link to="/blog/proxy-and-ai" className="text-[#00d4ff] hover:underline flex items-center">
                  {t('blog.readMore')}
                  <ChevronRight size={14} className="ml-1" />
                </Link>
              </div>
            </div>
          </div>
          {/* Pagination */}
          <div className="flex justify-center mt-12">
            <nav className="inline-flex rounded-md shadow-sm">
              <a href="#" className="px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-l-md transition-colors duration-300">
                上一页
              </a>
              <a href="#" className="px-4 py-2 border-t border-b border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-[#00d4ff] transition-colors duration-300">
                1
              </a>
              <a href="#" className="px-4 py-2 border-t border-b border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-300">
                2
              </a>
              <a href="#" className="px-4 py-2 border-t border-b border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-300">
                3
              </a>
              <a href="#" className="px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-r-md transition-colors duration-300">
                下一页
              </a>
            </nav>
          </div>
        </div>
      </section>
      {/* Newsletter */}
      <section className="py-16 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
        <div className="container mx-auto px-4 max-w-3xl text-center">
          <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-4">
            订阅我们的技术周刊
          </h2>
          <p className="text-gray-600 dark:text-gray-300 mb-8">
            获取最新的代理技术资讯、行业动态和产品更新
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <input type="email" placeholder="您的邮箱地址" className="flex-grow px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#00d4ff] bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300" />
            <Button>订阅</Button>
          </div>
          <p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
            我们尊重您的隐私，绝不会向第三方分享您的邮箱
          </p>
        </div>
      </section>
    </div>;
};
export default Blog;